<template>
  <v-app-bar absolute color="transparent" flat height="85">
    <v-container>
      <v-row align="center">
        <v-toolbar-title class="font-weight-light" v-text="title" />

        <v-spacer />

        <v-btn
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          class="hidden-sm-and-down"
          min-height="48"
          text
        >
          <v-icon left size="20" v-text="item.icon" />

          <span v-text="item.text" />
        </v-btn>
      </v-row>
    </v-container>
  </v-app-bar>
</template>

<script>
export default {
  name: "PagesCoreAppBar",

  data: () => ({
    items: [
      {
        icon: "mdi-view-dashboard",
        text: "仪表盘",
        to: "/",
      },
      {
        icon: "mdi-currency-usd",
        text: "找回密码",
        to: "/userLoginReg/find-password",
      },
      {
        icon: "mdi-account-multiple-plus",
        text: "用户注册",
        to: "/userLoginReg/register",
      },
      {
        icon: "mdi-fingerprint",
        text: "用户登录",
        to: "/userLoginReg/login",
      },
      {
        icon: "mdi-lock-open-outline",
        text: "系统解锁",
        to: "/userLoginReg/lock",
      },
    ],
  }),

  computed: {
    title() {
      return this.$route.meta.title;
    },
  },
};
</script>
